/* --- SAGE & BLACK THEME FIXED --- */
:root {
--bg-dark: #151715;
--container-dark: #1c1f1c;
--sage-primary: #789169;
--sage-nav: #92a47e;
--text-main: #e8eae3;
--text-dark: #151715;
--link-color: #A3B18A;
--border-radius: 8px;
--main-padding: 30px;
}
* { box-sizing: border-box; }
body {
font-family: 'Nunito', sans-serif;
margin: 0;
background-color: var(--bg-dark);
color: var(--text-main);
line-height: 1.6;
}
#container {
max-width: 1000px;
margin: 20px auto;
display: flex;
flex-direction: column;
}
#header {
width: 100%;
background-color: var(--sage-primary);
height: 180px;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
/* NAVIGATION & DROPDOWNS */
#navbar {
background-color: var(--sage-nav);
width: 100%;
border-bottom: 3px solid var(--bg-dark);
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
justify-content: space-evenly;
}
#navbar li {
position: relative; /* Required for dropdown positioning */
padding: 12px 15px;
}
#navbar a {
color: var(--text-dark);
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
/* Dropdown Menu Styles */
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: var(--sage-nav);
min-width: 180px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1000;
border: 1px solid var(--bg-dark);
}
.dropdown li {
padding: 8px 15px !important;
width: 100%;
}
.has-dropdown:hover .dropdown {
display: block;
}
.dropdown a {
text-transform: none !important;
font-weight: 600 !important;
}
/* CONTENT AREA */
#flex {
display: flex;
background-color: var(--container-dark);
}
aside {
width: 220px;
padding: 20px;
font-size: 0.9em;
}
main {
flex: 1;
padding: var(--main-padding);
border-left: 1px solid #2d332d;
border-right: 1px solid #2d332d;
}
h1, h2, h3 { color: var(--sage-primary); margin-top: 0; }
h2 {
background-color: var(--sage-primary);
color: var(--text-dark);
padding: 8px 15px;
border-radius: 4px;
}
footer {
background-color: var(--sage-nav);
color: var(--text-dark);
padding: 15px;
text-align: center;
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
/* MOBILE FIXES */
@media screen and (max-width: 800px) {
#flex { flex-direction: column; }
aside { width: 100%; }
#navbar ul { flex-wrap: wrap; }
.dropdown { position: static; width: 100%; }
}
/* --- DROPDOWN MENU FIX --- */
/* 1. Make the parent item a reference point */
#navbar li.has-dropdown {
position: relative;
}
/* 2. Hide the dropdown by default and style the box */
#navbar ul.dropdown {
display: none; /* Hidden by default */
position: absolute; /* Positions it relative to the LI above */
top: 100%; /* Places it exactly below the nav bar */
left: 0;
background-color: #000000; /* Black background */
min-width: 180px;
z-index: 1000;
flex-direction: column; /* Make links stack vertically */
padding: 0;
margin: 0;
list-style: none;
box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
}
/* 3. Show the dropdown when the mouse hovers over the parent LI */
#navbar li.has-dropdown:hover > ul.dropdown {
display: flex;
}
/* 4. Style the links inside the dropdown */
#navbar ul.dropdown li {
padding: 0;
width: 100%;
}
#navbar ul.dropdown li a {
color: #ffffff !important; /* White text */
padding: 12px 16px;
display: block;
text-transform: none; /* Normal capitalization */
font-size: 14px;
font-weight: 400;
}
/* 5. Hover effect for the dropdown links */
#navbar ul.dropdown li a:hover {
background-color: #333333; /* Dark grey hover */
text-decoration: none;
}